<template>
    <div class='cmt-centen'>
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要BB的内容（最多120个字）" v-model="content"></textarea>
         <mt-button type="primary" size="large" clsss='cmt-submit' @click='submit'>发表评论</mt-button>

         <div class="cmt-list">
             <div class="cmt-item" v-for='(item,i) in commentList' :key='item.i'>
                 <div class="cmt-title">
                     <span>第{{i+1}}楼</span> 
                     <span style='margin-left:35px'>用户：{{item.user_name}}</span> <br>
                     <span>发表时间：{{item.add_time}}</span>
                 </div> 
                 <div class="cmt-body">
                     {{item.content=='undefined'?'空的':item.content}}
                 </div>
             </div>
         </div>

          <mt-button type="danger" size="large" plain @click='getmore'>加载更多</mt-button>
    </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
    
}
</script>

<style lang="scss" scoped>
    .cmt-centen{
        h3{
            font-size: 20px;
        }
        textarea{
            height: 90px;
            margin-bottom: 0;
        }
        .mint-button--primary{
            background-color: #6d51e0 ;
            margin-bottom: 10px;
        }
        .cmt-list{
            .cmt-item{
                font-size: 14px;
            }
            .cmt-title{
                background-color: #ab9de4;
                padding: 5px 15px;
                margin: 0 10px;
                border-radius: 6px;
            }
            .cmt-body{
                padding: 13px 0;
                margin: 0 13px;
            }
        }
    }
</style>

<script>
import { Toast } from "mint-ui";
    export default{
        data(){
            return {
                pageindex:1,
                commentList:[],
                content:''
            }
        },
        created() {
            this.getComments()
        },
        methods: {
            getComments(){
                // console.log(this.id+'---------------------------')
                this.$http.get('api/getcomments/'+this.id+'?pageindex='+this.pageindex).then(res=>{
                    // console.log(res)
                    if(res.body.status==0){
                        // this.commentList = res.body.message;
                        this.commentList = this.commentList.concat(res.body.message)
                        // console.log(this.commentList)
                    }else{
                        Toast('获取失败')
                    }
                })
            },
            getmore(){              //获取更多评论
                this.pageindex++    
                this.getComments()
            },
            submit(){               //发表评论
                if(this.content.trim().length==0){
                    return Toast('什么都没有输入')
                }

                this.$http.post('api/postcomment/'+this.$route.params.id,{
                    content:this.content.trim()
                }).then(res=>{
                   console.log(res)
                    if(res.body.status==0){
                        var cmt = {
                            user_name:'匿名用户',
                            add_time:Date.now(),
                            content:this.content.trim()
                        };
                        this.commentList.unshift(cmt);
                        this.content='';
                    }else{
                        Toast('评论失败')
                    }
                })
            }

        },
        props:['id']    //获取newsinfo传过来的id
    }



</script>

